<template>
  <el-card class="uploadBox">
    <el-tabs v-model="activeName" style="padding: 20px">
      <el-tab-pane label="本地网盘" name="first">
        <div class="local">
          <div class="selectfile">上传文件</div>
          <div class="file" v-if="selectFileobj">
            <img :src="'https://mooc2-ans.chaoxing.com/mooc2-ans/images/coursedata/'+filetype+'.png'">
            {{filename}}
          </div>
          <div class="inputs">
            <button @click="openSelect('')">选择文件</button>
            <button @click="Tofileupload()" v-if="selectFileobj">上传</button>
          </div>
          本地网盘限制最大为<el-tag>10MB</el-tag>。<br>超出的请通过其他途径上传
          <input type="file" ref="file" @change="selectFile" />
        </div>
      </el-tab-pane>
      <el-tab-pane label="e100网盘" name="second">
        <div style="margin-top: 15px;">
          <el-input placeholder="输入文件地址" v-model="fileUrl">
            <el-button slot="append" @click="saveFile">保存</el-button>
          </el-input>
        </div>
        <el-divider></el-divider>
        e100网盘限制最大为<el-tag>40MB</el-tag>。<br>上传较慢，请耐心等待<br>上传后将页面中的文件地址复制，并填入上方文本框中。
        <form action="http://www.e100soft.com/lwsh/downfile/326.asp" method="post" enctype="multipart/form-data"
          class="e100Inputs">
          <br>
          <input @click="openSelect('e100')" value="选择文件" type="button">
          <input type="file" name="file1" ref="e100" />
          <input type="submit" value="上传" />
        </form>
      </el-tab-pane>
      <el-tab-pane label="其他网盘" name="third">
        <div style="margin-top: 15px;">
          <el-input placeholder="输入文件地址" v-model="fileUrl">
            <el-button slot="append" @click="saveFile">保存</el-button>
          </el-input>
        </div>
        <el-divider></el-divider>
        支持：外链云盘、百度网盘、天翼云盘、OneDrive、蓝奏云盘<hr>
        外链网盘限制最大为<el-tag>50MB</el-tag>。<br>上传后复制页面底部的文件地址，并填入上方文本框中。<br>
        <el-link target="_blank" type="primary" href="http://wp.wadg.pro/upload.php">点击进入外链云盘</el-link>
        <hr>
        蓝奏云最大限制为<el-tag>100MB</el-tag>。
        <br>
        登录上传后选择文件右边的“···”，点击“外链分享地址”，复制后粘贴至上方文本框中。<br>
        <el-link target="_blank" type="primary" href="https://pc.woozooo.com/account.php?action=login&ref=/mydisk.php">点击进入蓝奏云盘</el-link>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script>
  import uploadApi from "../../api/upload.js"
  export default {
    name: "app",
    data() {
      return {
        filename: '',
        filetype: '',
        selectFileobj: null,
        fileUrl: "",
        activeName: "first"
      }
    },
    methods: {
      openSelect(type) {
        if (type) {
          this.$refs.e100.click()
          // console.log(this.$parent)
          return
        }
        this.$refs.file.click()
      },
      // 选择文件
      selectFile(e) {
        // console.log(this.$refs["file"].files);
        let upfile = this.$refs["file"].files[0];
        if (upfile) {
         if(upfile.size>=10760192){
           this.$notify.error({
             title: '错误',
             message: '文件过大，请选择其他网盘'
           });
           return
         }
          this.filename = upfile.name;
          this.selectFileobj = upfile;
        } else {
          this.filename = "";
        }
      },
      fileChange() {
        // this.$parent.$parent.Alert("成功", 'success')
      },
      // 上传按钮
      Tofileupload() {
        if (this.selectFileobj) {
          console.log(888,this.selectFileobj)
          uploadApi.upload(this.selectFileobj).then((res) => {
            if(res.code==1){
              this.$notify.success({
                title: '成功',
                message: '上传成功，请点击刷新'
              });
            }
          })
        } else {
          this.filename = "请选择要上传的文件";
        }
      },

      saveFile() {
        let fileSplits = this.fileUrl.split("/")
        let name = fileSplits[fileSplits.length - 1]
        let type;
        if (this.fileUrl.indexOf(".") != -1) {
          type = name.split(".")[name.split(".").length-1]
        } else {
          type = "weburl"
        }

        let re = uploadApi.otherWhere(name, this.fileUrl, type)
        re.then((res) => {
          console.log(res)
          this.$notify.success({
            title: '成功',
            message: '保存成功，请点击刷新文件查看'
          });
          this.$parent.$parent.pushFile(name, res.data.insertId)
        })
      }
    },
    watch: {
      filename(newValue) {
        let types = [{
          name: "photo",
          value: "pngjpgbmpjpeg"
        }, {
          name: "video",
          value: "mp4flvm3u8"
        }, {
          name: "zip",
          value: "zip7zrargz"
        }, {
          name: "word",
          value: "docx"
        }, {
          name: "excel",
          value: "xlsx"
        }, {
          name: "word",
          value: "docx"
        }, {
          name: "PPT",
          value: "pptx"
        }, {
          name: "PDF",
          value: "pdf"
        }, {
          name: "unknown",
          value: ""
        }]
        let namesplit = newValue.split(".")
        let type = namesplit[namesplit.length - 1]
        for (let i of types) {
          if (i.value.indexOf(type) != -1) {
            this.filetype = i.name
            return
          }
          this.filetype = "unknown"
        }
      }
    }
  };
</script>
<style scoped>
  [type="file"] {
    display: none;
  }

  .fileurl {
    width: 80%;
    margin-left: 10%;
    height: 30px;
    border: 0;
    background-color: rgba(255, 255, 255, 0);
    margin-top: 10px;
    border-bottom: #00aaff 2px solid;
  }

  .uploadBox {
    /* background-color: #f7f7f7; */
    width: 100%;
  }

  .inputs {
    letter-spacing: -100px
  }

  .inputs button,
  .e100Inputs input {
    height: 30px;
    border: 0;
    padding: 0px 20px;
    background-color: #00aaff;
    color: white;
    transition: all 0.3s;
    border-right: 1px solid white;
  }

  .inputs button:hover,
  .e100Inputs input:hover {
    background-color: #5555ff;
  }

  .file {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px 0;
  }

  .file img {
    width: 28px;
    height: 28px;
  }

  iframe {
    width: 100%;
    height: 400px;
  }
</style>
